<template>
  <div class="ws-controller-container">
    <div class="operate">
      <el-badge :value="businessUnreadNum" :max="99" :hidden="hideBadge" class="badge-dot" @click.native="dialogTableVisible=true">
        <el-button type="primary" size="small">业务消息</el-button>
      </el-badge>
    </div>
    <table-view :cols="cols" :tableData="tableData" :showPaginator="true" :showSearch="searchCondition.length > 0"
                :searchCondition="searchCondition" :pageNumber="pageNumber" :pageSize="pageSize"
                :operateButtons="operateButtons" :showOperate="true" :buttonCount="1" @on-operate="clickOperate"
                :totalRecords="totalRecords" @on-search="searchData" @size-change="sizeChange"
                @current-page-change="pageChange" @preClick="pageChange" @nextClick="pageChange">
    </table-view>
    <el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body :before-close="resetNum">
      <div slot="title">
        <span style="padding-right: 10px;">业务消息</span>
        <el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">清除所有</el-button>
      </div>
      <table-view :cols="header" :tableData="businessLogs" :max-height="500"></table-view>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "WSController",
  components: {
    // TableView
  },
  data() {
    let baseUrl = managerRemoteUrl;
    return {
      urls: {
        getTableHeaderUrl: baseUrl + '/wsData/header', // 表头
        getTableDataUrl: baseUrl + '/wsData', // 表格
        sendSocket: baseUrl + '/wsData/send/', // 重新发送
      },
      cols: [], // 表头
      tableData: [], // 表格
      pageNumber: 1,
      pageSize: 10,
      totalRecords: 0,
      searchCondition: [],
      searchFilter: {},
      operateButtons: ["重新发送"],
      dialogTableVisible: false,
      header: [
        {field: 'msgId', hidden: false,  header: "消息id"},
        {field: 'type', hidden: false,  header: "类型"},
        {field: 'data', hidden: false,  header: "数据"},
      ]
    }
  },
  mounted() {
    this.getTableHeader();
  },
  computed: {
    // 消息列表
    businessLogs() {
      return this.$store.getters.businessLogs
    },
    // 未读数量
    businessUnreadNum() {
      return this.$store.getters.businessUnreadNum
    },
    hideBadge() {
      return this.dialogTableVisible || this.businessUnreadNum === 0
    }
  },
  methods: {
    //获取表格的表头数据
    getTableHeader() {
      this.cols = [];
      this.searchCondition = [];
      this.httpRequest("get", this.urls.getTableHeaderUrl, {}, {fullSuccess: true}).then(res => {
        this.cols = res.value.cols;
        res.value.cols.forEach((d) => {
          if (d.search) {
            let obj = this.cloneObj(d);
            if (-1 !== d.header.indexOf('时间') && (-1 === d.type.indexOf('range'))) {
              let start = this.cloneObj(d);
              start['metaField'] = start.field;
              start['label'] = start.header.replace('时间', '开始时间');
              start['field'] = start.field.replace('time', 'timeStart');
              start['metaField'] = start.field;
              start['value'] = null;
              this.searchCondition.push(start);
              let end = this.cloneObj(d);
              end['label'] = end.header.replace('时间', '结束时间');
              end['field'] = end.field.replace('time', 'timeEnd');
              start['metaField'] = start.field;
              end['value'] = null;
              this.searchCondition.push(end);
            } else {
              obj['label'] = d.header;
              obj['value'] = null;
              this.searchCondition.push(obj);
            }
          }
        });
        let filterResult = this.setFilter(this.searchCondition);
        if (!filterResult.tip) {
          this.searchFilter = filterResult.data;
          this.getTableData();
        } else {
          this.$message.warning(filterResult.tip)
        }
      })
    },
    //获取表格的表格数据
    getTableData() {
      let param = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        filter: this.searchFilter
      }
      this.httpRequest("post", this.urls.getTableDataUrl, param, {fullSuccess: true}).then(res => {
        this.tableData = res.value.data || [];
        this.totalRecords = res.value.rows;
      })
    },
    // 点击操作
    clickOperate(e) {
      this.$confirm('确定要重新发送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendSocket(e.row)
      })
    },
    // 重新发送
    sendSocket(data) {
      this.httpRequest("put", this.urls.sendSocket + data.id, {}, {fullSuccess: true}).then(res => {
        this.$message.success("发送成功！")
      })
    },
    // 搜索
    searchData(e) {
      this.pageNumber = 1;
      let filterResult = this.setFilter(e);
      if (!filterResult.tip) {
        this.searchFilter = filterResult.data;
        this.getTableData();
      } else {
        this.$message.warning(filterResult.tip)
      }
    },
    // 更改pageSize
    sizeChange(size) {
      this.pageNumber = 1;
      this.pageSize = size;
      this.getTableData();
    },
    // 更改page，上一页、下一页、改变currentPage
    pageChange(page) {
      this.pageNumber = page;
      this.getTableData();
    },
    // 清除所有消息
    clearAll() {
      this.$confirm('确定要清空所有消息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit('log/CLEAR_BUSINESS_LOG')
      })
    },
    // 重置未读数量
    resetNum() {
      this.dialogTableVisible = false
      this.$store.commit('log/CLEAR_BUSINESS_UNREAD_NUM')
    },
  }
}
</script>

<style lang="scss" scoped>
.ws-controller-container {
  width: 100%;
  height: 100%;
  .operate {
    text-align: right;
  }
}
</style>
